<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="/css_js/layui/global.css" media="all">
		<!--layui-->
		<link rel="stylesheet" href="/css_js/layui/layui.css" media="all">
		<script src="/css_js/layui/layui.js" charset="utf-8"></script>

	</head>

	<body>
		<a href="http://www.layui.com/demo/" target="_blank">layui home</a>
		<ul class="site-dir">
			<li>
				<a href="#nav"><cite>水平导航</cite></a>
			</li>
			<li>
				<a href="#nav-theme"><cite>导航主题</cite></a>
			</li>
			<li>
				<a href="#navtree"><cite>垂直与侧边导航</cite></a>
			</li>
			<li>
				<a href="#attr"><cite>导航基础属性</cite></a>
			</li>
			<li>
				<a href="#breadcrumb"><cite>面包屑</cite></a>
			</li>

		</ul>

		<line>动画（依赖加载模块：基础库）</line>

		<ul class="site-doc-icon site-doc-anim">
			<li>
				<div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
				<div class="code">layui-anim-up</div>
			</li>
			<li>
				<div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
				<div class="code">layui-anim-upbit</div>
			</li>
			<li>
				<div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
				<div class="code">layui-anim-scale</div>
			</li>
			<li>
				<div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
				<div class="code">layui-anim-scaleSpring</div>
			</li>
			<li>
				<div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
				<div class="code">layui-anim-fadein</div>
			</li>
			<li>
				<div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
				<div class="code">layui-anim-fadeout</div>
			</li>
			<li>
				<div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
				<div class="code">layui-anim-rotate</div>
			</li>
			<li>
				<div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
				<div class="code">追加：layui-anim-loop</div>
			</li>
		</ul>

		<script>
			layui.use('jquery', function() {
				var $ = layui.$;

				//演示动画
				$('.site-doc-icon .layui-anim').on('click', function() {
					var othis = $(this),
						anim = othis.data('anim');

					//停止循环
					if(othis.hasClass('layui-anim-loop')) {
						return othis.removeClass(anim);
					}

					othis.removeClass(anim);

					setTimeout(function() {
						othis.addClass(anim);
					});
					//恢复渐隐
					if(anim === 'layui-anim-fadeout') {
						setTimeout(function() {
							othis.removeClass(anim);
						}, 1300);
					}
				});
			});
		</script>

		<style>
			.site-doc-icon li {
				width: 222px;
			}
			
			.site-doc-icon li .layui-anim {
				width: 150px;
				height: 150px;
				line-height: 150px;
				margin: 0 auto 10px;
				text-align: center;
				background-color: #009688;
				cursor: pointer;
				color: #fff;
				border-radius: 50%;
			}
		</style>

		<line>表单（依赖加载模块：form ）</line>
		<div class="site-text site-block">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">输入框</label>
					<div class="layui-input-block">
						<input type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input layui-form-danger">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码框</label>
					<div class="layui-input-inline">
						<input type="password" name="password" required="" lay-verify="required" lay-vertype="tips" placeholder="请输入密码" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid layui-word-aux">辅助文字</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">选择框</label>
					<div class="layui-input-block">
						<select name="city" lay-verify="required">
							<option value=""></option>
							<option value="0">北京</option>
							<option value="1">上海</option>
							<option value="2">广州</option>
							<option value="3">深圳</option>
							<option value="4">杭州</option>
						</select>
						<div class="layui-unselect layui-form-select">
							<div class="layui-select-title"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div>
							<dl class="layui-anim layui-anim-upbit" style="">
								<dd lay-value="" class="layui-select-tips">请选择</dd>
								<dd lay-value="0" class="layui-this">北京</dd>
								<dd lay-value="1" class="">上海</dd>
								<dd lay-value="2" class="">广州</dd>
								<dd lay-value="3" class="">深圳</dd>
								<dd lay-value="4" class="">杭州</dd>
							</dl>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">复选框</label>
					<div class="layui-input-block">
						<input type="checkbox" name="like[write]" title="写作">
						<div class="layui-unselect layui-form-checkbox layui-form-checked"><span>写作</span><i class="layui-icon layui-icon-ok"></i></div>
						<input type="checkbox" name="like[read]" title="阅读" checked="">
						<div class="layui-unselect layui-form-checkbox"><span>阅读</span><i class="layui-icon layui-icon-ok"></i></div>
						<input type="checkbox" name="like[dai]" title="发呆">
						<div class="layui-unselect layui-form-checkbox"><span>发呆</span><i class="layui-icon layui-icon-ok"></i></div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">开关</label>
					<div class="layui-input-block">
						<input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" lay-filter="switchTest" value="1">
						<div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em>ON</em><i></i></div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">单选框</label>
					<div class="layui-input-block">
						<input type="radio" name="sex" value="男" title="男">
						<div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i>
							<div>男</div>
						</div>
						<input type="radio" name="sex" value="女" title="女" checked="">
						<div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
							<div>女</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">文本域</label>
					<div class="layui-input-block">
						<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		<script>
			//Demo
			layui.use('form', function() {
				var form = layui.form;

				form.on('switch(switchTest)', function(data) {
					layer.tips('开关checked：' + (this.checked ? 'true' : 'false'), data.othis)
				});

				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
		</script>

		<line>导航（依赖加载模块：element）</line>
		<ul class="layui-nav">
			<li class="layui-nav-item">
				<a href="">最新活动</a>
			</li>
			<li class="layui-nav-item layui-this">
				<a href="">产品</a>
			</li>
			<li class="layui-nav-item">
				<a href="">大数据</a>
			</li>
			<li class="layui-nav-item">
				<a href="javascript:;">解决方案</a>
				<dl class="layui-nav-child">
					<dd>
						<a href="">移动模块</a>
					</dd>
					<dd>
						<a href="">后台模版</a>
					</dd>
					<dd>
						<a href="">电商平台</a>
					</dd>
				</dl>
			</li>
			<li class="layui-nav-item">
				<a href="">社区</a>
			</li>
		</ul>

		<line>`</line>
		<ul class="layui-nav">
			<li class="layui-nav-item">
				<a href="">控制台<span class="layui-badge">9</span></a>
			</li>
			<li class="layui-nav-item">
				<a href="">个人中心<span class="layui-badge-dot"></span></a>
			</li>
			<li class="layui-nav-item">
				<a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
				<dl class="layui-nav-child">
					<dd>
						<a href="javascript:;">修改信息</a>
					</dd>
					<dd>
						<a href="javascript:;">安全管理</a>
					</dd>
					<dd>
						<a href="javascript:;">退了</a>
					</dd>
				</dl>
			</li>
		</ul>

		<line>`</line>

		<ul class="layui-nav layui-nav-tree" id="L_demoNav" lay-filter="test">
			<li class="layui-nav-item layui-nav-itemed">
				<a href="javascript:;">默认展开</a>
				<dl class="layui-nav-child">
					<dd>
						<a href="javascript:;">选项1</a>
					</dd>
					<dd>
						<a href="javascript:;">选项2</a>
					</dd>
					<dd>
						<a href="">跳转项</a>
					</dd>
				</dl>
			</li>
			<li class="layui-nav-item">
				<a href="javascript:;">解决方案</a>
				<dl class="layui-nav-child">
					<dd>
						<a href="">移动模块</a>
					</dd>
					<dd>
						<a href="">后台模版</a>
					</dd>
					<dd>
						<a href="">电商平台</a>
					</dd>
				</dl>
			</li>
			<li class="layui-nav-item">
				<a href="">产品</a>
			</li>
			<li class="layui-nav-item">
				<a href="">大数据</a>
			</li>
			<li class="layui-nav-item layui-hide" id="L_demoNavReset">
				<a href="javascript:;" onclick="L_demoNav.className='layui-nav layui-nav-tree';L_demoNavReset.className='layui-nav-item layui-hide';">还原该导航演示</a>
			</li>
		</ul>
		<line>`</line>
		<span class="layui-breadcrumb">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
		<line>`</line>
		<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
		<line>`</line>
		<span class="layui-breadcrumb" lay-separator="|">
  <a href="">娱乐</a>
  <a href="">八卦</a>
  <a href="">体育</a>
  <a href="">搞笑</a>
  <a href="">视频</a>
  <a href="">游戏</a>
  <a href="">综艺</a>
</span>

		<line>Tabs（依赖加载组件：element）</line>
		<div class="layui-tab" style="margin: 30px 0;">
			<ul class="layui-tab-title">
				<li class="layui-this">网站设置</li>
				<li>用户管理</li>
				<li>权限分配</li>
				<li>商品管理</li>
				<li>订单管理</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
					<blockquote class="layui-elem-quote">如果需要对Tab进行外部新增、删除、切换等操作，请移步到“内置组件-常用元素操作”页面中查阅：基础方法</blockquote>
				</div>
				<div class="layui-tab-item">内容2</div>
				<div class="layui-tab-item">内容3</div>
				<div class="layui-tab-item">内容4</div>
				<div class="layui-tab-item">内容5</div>
			</div>
		</div>

		<div class="site-text">
			<div class="layui-tab layui-tab-card">
				<ul class="layui-tab-title">
					<li class="layui-this">网站设置</li>
					<li>用户管理</li>
					<li>权限分配</li>
					<li>商品管理</li>
					<li>订单管理</li>
				</ul>
				<div class="layui-tab-content" style="height: 100px;">
					<div class="layui-tab-item layui-show">1</div>
					<div class="layui-tab-item">2</div>
					<div class="layui-tab-item">3</div>
					<div class="layui-tab-item">4</div>
					<div class="layui-tab-item">5</div>
					<div class="layui-tab-item">6</div>
				</div>
			</div>

			<script>
				window.global = {
					pageType: 'doc',
					preview: function() {
						var preview = document.getElementById('LAY_preview');
						return preview ? preview.innerHTML : '';
					}()
				};
					layui.config({
						base: '',
						version: '1531663423583'
					}).use('global');
			</script>
			<script>
//				layui.use(['element', 'layer'], function() {
//					var element = layui.element,
//						layer = layui.layer;
//
//					element.on('tab(docDemoTabBrief)', function(data) {
//						layer.msg('切到了' + data.index + '：' + this.innerHTML);
//					});
//				});
			</script>

			<line>进度条（依赖加载组件：element）</line>
			<div class="layui-progress">
				<div class="layui-progress-bar" lay-percent="20%"></div>
			</div>
			<br>
			<div class="layui-progress">
				<div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
			</div>
			<br>
			<div class="layui-progress" lay-showPercent="true">
				<div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
			</div>
			<br>
			<div class="layui-progress layui-progress-big" lay-showPercent="true">
				<div class="layui-progress-bar layui-bg-cyan" lay-percent="30%"></div>
			</div>

			<line>面板（依赖加载组件：element）</line>
			<div class="site-text">

				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">杜甫</h2>
						<div class="layui-colla-content layui-show">
							<p>杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。</p>
						</div>
					</div>
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">李清照</h2>
						<div class="layui-colla-content">
							<p>李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。</p>
						</div>
					</div>
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">鲁迅</h2>
						<div class="layui-colla-content">
							<p>鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。</p>
						</div>
					</div>
				</div>

				<line>table（依赖加载组件：基础库）</line>
				<table class="layui-table">
					<colgroup>
						<col width="150">
						<col width="200">
						<col>
					</colgroup>
					<thead>
						<tr>
							<th>昵称</th>
							<th>加入时间</th>
							<th>签名</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>贤心</td>
							<td>2016-11-29</td>
							<td>人生就像是一场修行</td>
						</tr>
						<tr>
							<td>许闲心</td>
							<td>2016-11-28</td>
							<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
						</tr>
						<tr>
							<td>sentsin</td>
							<td>2016-11-27</td>
							<td> Life is either a daring adventure or nothing.</td>
						</tr>
					</tbody>
				</table>

				<line>时间线（依赖加载组件：基础库）</line>
				<ul class="layui-timeline">
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">8月18日</h3>
							<p>
								layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
								<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
								<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
							</p>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">8月16日</h3>
							<p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
							<ul>
								<li>《登高》</li>
								<li>《茅屋为秋风所破歌》</li>
							</ul>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">8月15日</h3>
							<p>
								中国人民抗日战争胜利72周年
								<br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
								<br>铭记、感恩
								<br>所有为中华民族浴血奋战的英雄将士
								<br>永垂不朽
							</p>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
						<div class="layui-timeline-content layui-text">
							<div class="layui-timeline-title">过去</div>
						</div>
					</li>
				</ul>

				<line>分割线（依赖加载组件：基础库）</line>
				<blockquote class="layui-elem-quote">引用区域的文字</blockquote>

				默认分割线
				<hr> 赤色分割线
				<hr class="layui-bg-red"> 橙色分割线
				<hr class="layui-bg-orange"> 墨绿分割线
				<hr class="layui-bg-green"> 青色分割线
				<hr class="layui-bg-cyan"> 蓝色分割线
				<hr class="layui-bg-blue"> 黑色分割线
				<hr class="layui-bg-black"> 灰色分割线
				<hr class="layui-bg-gray">
	</body>

	<line>分页table（依赖加载组件：table）</line>
	<table id="demo" lay-filter="test"></table>
	<script>
		layui.use('table', function() {
			var table = layui.table;

			//第一个实例
			table.render({
				elem: '#demo',
				height: 315,
				url: 'modules/user.json' //数据接口
					,
				page: true //开启分页
					,
				cols: [
					[{
							field: 'id',
							title: 'ID',
							width: 80,
							sort: true
						}, {
							field: 'username',
							title: '用户名',
							width: 80
						}, {
							field: 'sex',
							title: '性别',
							width: 80,
							sort: true
						}, {
							field: 'city',
							title: '城市'
						} //如果未设定列宽，宽度将会自动分配（注：layui 2.2.0 新增功能，之前的版本一定要设置 width）
						, {
							field: 'sign',
							title: '签名'
						}, {
							field: 'experience',
							title: '积分',
							sort: true
						}, {
							field: 'score',
							title: '评分',
							sort: true
						}, {
							field: 'classify',
							title: '职业'
						}, {
							field: 'wealth',
							title: '财富',
							sort: true
						}
					]
				]
			});
		});
	</script>

	<line>时间选择器（依赖加载组件：laydate）</line>
	<input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
	<script>
		layui.use('laydate', function() {
			var laydate = layui.laydate;

			//执行一个laydate实例
			laydate.render({
				elem: '#test1' //指定元素
			});

			//嵌套显示
			laydate.render({
				elem: '#test2',
				position: 'static',
				change: function(value) {
					lay('#testView').html(value);
				}
			});
		});
	</script>
	
	
	<line>弹窗</line>
<button id="tc">打开窗口1</button>
<button id="tc2">打开窗口2</button>
	<style>
		.runtest {
			position: relative;
			display: none;
		}
		
		.runtest textarea {
			display: block;
			width: 300px;
			height: 160px;
			border: 10px solid #F8F8F8;
			border-top-width: 0;
			padding: 10px;
			line-height: 20px;
			overflow: auto;
			background-color: #3F3F3F;
			color: #eee;
			font-size: 12px;
			font-family: Courier New;
		}
		
		.runtest a {
			position: absolute;
			right: 20px;
			bottom: 20px;
			color: white;
		}
		
		.layer-photos-demo {
			margin: 10px 0;
		}
		
		.layer-photos-demo img {
			width: 160px;
			height: 100px;
		}
	</style>
	<div class="runtest">
		<textarea class="site-demo-text" id="testmain">
layer.open({
  title: '在线调试'
  ,content: '可以填写任意的layer代码'
});     
  </textarea>
		<a href="javascript:;" class="layui-btn layui-btn-normal" onclick="try{new Function(testmain.value)();}catch(e){alert('语句异常：'+e.message)}" class="btns">立即运行</a>
	</div>

	<script>
		layui.use('layer', function() {
			var $ = layui.jquery,
				layer = layui.layer;

			if($(window).width() <= 750) return;

			var debug = $('#L_layerDebug'),
				popDebug = function() {
					layer.open({
						type: 1,
						title: '在线调试',
						id: 'Lay_layer_debug',
						content: $('.runtest'),
						shade: false,
						offset: 'rb',
						resize: false,
						success: function(layero, index) {
							layer.style(index, {
								marginLeft: -220
							});
							debug.hide();
						},
						end: function() {
							debug.show();
						}
					});
					testmain.focus();
				},
				open = function() {

					layer.open({
						type: 2,
						shade: false,
						area: ['800px', '1350px'],
						maxmin: true,
						content: 'http://www.layui.com',
						zIndex: layer.zIndex, //重点1
						success: function(layero) { 
							console.log(layero)
							layer.setTop(layero); //重点2
						},
						fail:function(e){
							console.log(e)	
						}
					});

				};

			debug.on('click', popDebug);
			
			
			$('#tc').on('click',function(){
				//加载运行脚本的输入框
				popDebug();
				
			})
			
			
			$('#tc2').on('click',function(){
				//加载窗体
				open();
				
			})
			layer.ready(function() {
				layer.photos({
					photos: '#layer-photos-demo'
				});
			});

		});
	</script>

</html>